<html>
  <head></head>
  <body>
    <script src="https://github.com/craftyjs/Crafty/releases/download/0.6.3/crafty.js"></script>
    <script>
    var size = 64;
    var mapSize = 5;
    Crafty.init(size * mapSize, size * mapSize);

    for (var i = 0; i < mapSize; i++) {
      for (var j = 0; j < mapSize; j++) {
        var tile = Crafty.e("2D, Canvas, Collision, Color, WiredHitBox")
                    .attr({x: i*size, y: j*size, w: size, h: size, z: 1});
        if (i === 0 || j === 0 || i === mapSize - 1 || j === mapSize - 1)
            tile.requires('Solid')
                .color('lime');
        else
            tile.color('gray');
      }     
    }

    Crafty.e("2D, Canvas, Collision, Color, Tween, SolidHitBox")
          .attr({x: 2*size - size/4, y: 2*size - size/4, w: size + size/2, h: size + size/2, z: 10})
          .color('blue')
          .collision(
            [size/4,size/4], [size+size/4, size/4], [size+size/4,size+size/4], [size/4, size+size/4]
          )
          .bind("KeyDown", function(e) {
            if (e.key === Crafty.keys.UP_ARROW && this.y / size > 1)
              this.tween({y: this.y - size}, 500);
            else if (e.key === Crafty.keys.DOWN_ARROW && this.y / size < mapSize - 3)
              this.tween({y: this.y + size}, 500);
            else if (e.key === Crafty.keys.LEFT_ARROW && this.x / size > 1)
              this.tween({x: this.x - size}, 500);
            else if (e.key === Crafty.keys.RIGHT_ARROW && this.x / size < mapSize - 3)
              this.tween({x: this.x + size}, 500);
          })
    </script>
  </body>
</html>
